/*
 * @Description: 时间轴测试
 * @Author: ZhangHan
 * @Date: 2025-07-23 17:33:19
 * @LastEditTime: 2025-07-23 18:19:01
 * @LastEditors: ZhangHan
 */
import React, { useEffect, useState } from "react";
import { timeLineData } from "@/mock/timeLine";
import { Timeline, Tabs } from "antd";
import TimeLineOne from "./components/TimeLineOne";

function TimeLine() {
  const [timeList, setTimeList] = useState(timeLineData?.timeLine);

  useEffect(() => {
    console.log(timeLineData?.timeLine);
    const listOne = timeLineData?.timeLine.map((item) => {
      return {
        label: item.timestamp,
        color: item.flag ? "green" : "red",
        children: (
          <>
            <p>标题：{item.title}</p>
            {item.description && <p>描述：{item.description}</p>}
          </>
        ),
      };
    });
    console.log("🚀 ~ useEffect ~ listOne:", listOne);
    setTimeList(listOne);
  }, []);

  return (
    <>
      <div>
        <Tabs
          defaultActiveKey="1"
          items={[
            {
              label: "时间轴1",
              key: "1",
              children: <TimeLineOne list={timeList} />,
            },
            {
              label: "Tab 2",
              key: "2",
              children: "Tab 2",
            },
            {
              label: "Tab 3",
              key: "3",
              children: "Tab 3",
            },
          ]}
        />
      </div>
    </>
  );
}

export default TimeLine;
